<template>
  <Modal
    v-model="showModal"
    title="新增"
    :draggable="true"
    :mask-closable="false"
    footer-hide
  >
    <Form
      :model="addInfo"
      :label-width="80"
      ref="formItem"
      :rules="createRules"
    >
      <FormItem label="名称" prop="name">
        <Input v-model="addInfo.name" />
      </FormItem>
      <FormItem label="目标项目" prop="target_project_id">
        <Select v-model="addInfo.target_project_id" @on-change="changeTarget">
          <Option
            :value="+item.value"
            v-for="item in targetProjectList"
            :key="item.value"
            :disabled="item.disabled"
            >{{ item.label }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="归属人" prop="target_member_ids">
        <Select multiple filterable v-model="addInfo.target_member_ids">
          <Option
            :value="+item.value"
            v-for="item in memberList"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </FormItem>
      <p class="ivu-ml-16 title">筛选条件</p>
      <FormItem label="原项目" prop="select_project_id">
        <Select v-model="addInfo.select_project_id" @on-change="changeOld">
          <Option
            :value="+item.value"
            v-for="item in projectList"
            :disabled="item.disabled"
            :key="item.value"
            >{{ item.label }}</Option
          >
        </Select>
      </FormItem>
      <FormItem label="创建日期" prop="create_time">
        <DatePicker
          type="daterange"
          v-model="addInfo.create_time"
          placement="bottom-end"
          style="width: 100%;"
        />
      </FormItem>
      <FormItem label="地区" prop="select_city_ids">
        <Select v-model="addInfo.select_city_ids" multiple filterable clearable>
          <OptionGroup
            :label="item.label"
            v-for="item in cityList"
            :key="item.value"
          >
            <Option
              :value="el.value"
              v-for="el in item.children"
              :key="el.value"
              >{{ el.label }}</Option
            >
          </OptionGroup>
        </Select>
      </FormItem>
      <FormItem label="患者状态" prop="select_patient_status_ids">
        <Select v-model="addInfo.select_patient_status_ids" multiple clearable>
          <Option :value="item.id" v-for="item in statusList" :key="item.id">{{
            item.status_name
          }}</Option>
        </Select>
      </FormItem>
      <FormItem label="回访次数" prop="select_max_callback_num">
        &lt;= <InputNumber :min="0" v-model="addInfo.select_max_callback_num" />
        <Tooltip content="回访次数小于等于输入的值" placement="top">
          <Icon
            type="ios-alert-outline"
            size="20"
            class="ivu-ml-8"
            color="#2b85e4"
          />
        </Tooltip>
      </FormItem>
      <FormItem>
        <Button type="primary" :loading="searchLoading" @click="haddleSearch"
          >查询</Button
        >
      </FormItem>
      <p class="ivu-ml-16 title">模块</p>
      <FormItem
        :label-width="0"
        class="ivu-ml-16"
        prop="select_patient_data_type"
      >
        <CheckboxGroup v-model="addInfo.select_patient_data_type">
          <Checkbox
            :label="item.value"
            v-for="item in modelInfo"
            :key="item.value"
            >{{ item.label }}（{{
              modelNums[item.value] ? modelNums[item.value] : 0
            }}）</Checkbox
          >
        </CheckboxGroup>
      </FormItem>
    </Form>

    <div class="modalFoot">
      <Button @click="modalcancel()">取消</Button>
      <Button
        class="ivu-ml-16"
        :loading="btnLoading"
        type="primary"
        :disabled="modelNums.length == 0"
        @click="modalSbmit()"
        >确定</Button
      >
    </div>
  </Modal>
</template>
<script>
import {
  shareCreate,
  shareEditInfo,
  shareMemberList,
  sharePatientList,
} from "@/api/datashare";
import dayjs from "dayjs";
export default {
  data() {
    return {
      showModal: false,
      btnLoading: false,
      searchLoading: false,
      searchInfo: {
        select_project_id: "",
        create_time: [],
        select_city_ids: [],
        select_patient_status_ids: [],
        select_max_callback_num: null,
      },
      addInfo: {
        name: "",
        select_project_id: "",
        create_time: [],
        select_city_ids: [],
        select_patient_status_ids: [],
        select_max_callback_num: null,
        target_project_id: null,
        target_member_ids: [],
        select_patient_data_type: [],
      },
      modelInfo: [],
      modelNums: [],
      projectList: [],
      targetProjectList: [],
      statusList: [],
      memberList: [],
      cityList: [],
      createRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        target_project_id: [
          {
            required: true,
            type: "number",
            message: "请选择目标项目",
            trigger: "change",
          },
        ],
        target_member_ids: [
          {
            required: true,
            type: "array",
            message: "请选择归属人",
            trigger: "change",
          },
        ],
        select_patient_data_type: [
          {
            required: true,
            type: "array",
            message: "请选择模块",
            trigger: "change",
          },
        ],
        select_project_id: [
          {
            required: true,
            type: "number",
            message: "请选择原项目",
            trigger: "change",
          },
        ],
        create_time: [
          {
            required: true,
            type: "array",
            message: "请选择创建时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    addInfo: {
      handler() {
        let info = {
          select_project_id: this.addInfo.select_project_id,
          create_time: this.addInfo.create_time,
          select_city_ids: this.addInfo.select_city_ids,
          select_patient_status_ids: this.addInfo.select_patient_status_ids,
          select_max_callback_num: this.addInfo.select_max_callback_num,
        };
        if (JSON.stringify(this.searchInfo) != JSON.stringify(info)) {
          this.modelNums = [];
        }
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.addInfo = {
        name: "",
        target_project_id: null,
        target_member_ids: [],
        select_project_id: "",
        create_time: [],
        select_city_ids: [],
        select_patient_status_ids: [],
        select_max_callback_num: null,
        select_patient_data_type: [],
      };

      this.modelNums = [];
      this.modelInfo = [];
      this.projectList = [];
      this.targetProjectList = [];
      this.statusList = [];
      this.memberList = [];
      this.cityList = [];
      this.cityList = this.storage.get("cityarray");
      this.showModal = true;
      shareEditInfo({ id: 0 }).then((res) => {
        this.modelInfo = res.condition.patient_data_type;
        this.projectList = JSON.parse(JSON.stringify(res.condition.project));
        this.targetProjectList = JSON.parse(
          JSON.stringify(res.condition.project)
        );
        this.statusList = res.condition.status_list;
      });
      this.$nextTick(() => {
        this.$refs.formItem.resetFields();
      });
    },
    changePro(data, id) {
      data.forEach((item) => {
        if (item.value == id) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
      return data;
    },
    changeTarget(e) {
      if (e) {
        this.changePro(this.projectList, e);
        this.addInfo.target_member_ids = [];
        shareMemberList({ project_id: e }).then((res) => {
          this.memberList = res;
        });
      }
    },
    changeOld(e) {
      if (e) {
        this.changePro(this.targetProjectList, e);
      }
    },
    haddleSearch() {
      if (!this.addInfo.select_project_id) {
        this.$Message.error("请选择原项目！");
        return;
      }
      if (
        this.addInfo.create_time.length == 0 ||
        this.addInfo.create_time[0] == ""
      ) {
        this.$Message.error("请选择创建日期！");
        return;
      }
      this.searchInfo = {
        select_project_id: this.addInfo.select_project_id,
        create_time: this.addInfo.create_time,
        select_city_ids: this.addInfo.select_city_ids,
        select_patient_status_ids: this.addInfo.select_patient_status_ids,
        select_max_callback_num: this.addInfo.select_max_callback_num,
      };
      let params = {
        target_member_ids: this.addInfo.target_member_ids,
        select_project_id: this.addInfo.select_project_id,
        select_create_stime: dayjs(this.addInfo.create_time[0]).format(
          "YYYY-MM-DD"
        ),
        select_create_etime: dayjs(this.addInfo.create_time[1]).format(
          "YYYY-MM-DD"
        ),
        select_city_ids: this.addInfo.select_city_ids,
        select_patient_status_ids: this.addInfo.select_patient_status_ids,
        select_max_callback_num: this.addInfo.select_max_callback_num,
      };
      this.searchLoading = true;
      sharePatientList(params)
        .then((res) => {
          this.modelNums = res;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },
    modalcancel() {
      this.showModal = false;
    },
    modalSbmit() {
      this.$refs["formItem"].validate((valid) => {
        if (valid) {
          let params = {
            name: this.addInfo.name,
            select_project_id: this.addInfo.select_project_id,
            select_create_stime: dayjs(this.addInfo.create_time[0]).format(
              "YYYY-MM-DD"
            ),
            select_create_etime: dayjs(this.addInfo.create_time[1]).format(
              "YYYY-MM-DD"
            ),
            select_city_ids: this.addInfo.select_city_ids,
            select_patient_status_ids: this.addInfo.select_patient_status_ids,
            select_max_callback_num: this.addInfo.select_max_callback_num,
            target_project_id: this.addInfo.target_project_id,
            target_member_ids: this.addInfo.target_member_ids,
            select_patient_data_type: this.addInfo.select_patient_data_type,
          };
          this.btnLoading = true;
          shareCreate(params)
            .then((res) => {
              this.btnLoading = false;
              this.$emit("refresh");
              this.showModal = false;
            })
            .catch(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    cityvalue(city) {
      this.addInfo.select_city_ids = city;
    },
  },
};
</script>
<style lang="less" scoped>
.modalFoot {
  text-align: right;
  border-top: 1px solid #ddd;
  padding-top: 16px;
  margin-top: 24px;
}
.title {
  color: #999;
  margin-bottom: 15px;
}
</style>
